<template>
  <div v-if="model" class="article">
    <nav-bar></nav-bar>
    <div class="video">
      <video :src="model.content" controls></video>
    </div>
    <div class="detail_text">
      <div>
        <span>{{ model.category.title }}</span
        ><span>{{ model.name }}</span>
      </div>
      <div>
        <span>{{ model.userinfo.name }}</span>
        <span>1235万次观看</span>
        <span>54321弹幕</span>
        <span>{{ model.date }}</span>
      </div>
      <div>
        <span :class="sc" @click="save"
          ><van-icon name="star" /> <span>收藏</span></span
        >
        <span @click="cache"
          ><van-icon name="invition" /><span>缓存</span></span
        >
        <span @click="share"><van-icon name="share" /><span>分享</span></span>
      </div>
    </div>

    <div class="detail_box">
      <detail
        class="detail_item"
        v-for="(item, index) in commendList"
        :key="index"
        :detailItem="item"
      ></detail>
    </div>
    <comment></comment>
  </div>
</template>

<script>
import Comment from "../components/article/comment.vue";
import NavBar from "../components/common/NavBar.vue";
import Detail from "./../components/common/Detail";
import {
  getArticle,
  getCommandData,
  saveArticle,
  isSave,
} from "./../utils/Api";
export default {
  components: {
    NavBar,
    Detail,
    Comment,
  },
  data() {
    return {
      model: null,
      sc: "",
      commendList: {},
      mySelfData: {},
    };
  },
  watch: {
    $route(newValue, oldValue) {
      this.toArticle();
      this.isSC();
    },
  },
  created() {
    this.getArticle();
    this.commandData();
    this.isSC();
  },
  methods: {
    async getArticle() {
      const res = await getArticle(this.$route.params.id);
      this.model = res.data[0];
    },

    // 推荐文章
    async commandData() {
      const res = await getCommandData();
      this.commendList = res.data;
    },

    toArticle() {
      if (JSON.parse(localStorage.getItem("token"))) {
        this.getArticle();
        this.commandData();
      }
    },

    async save() {
      if (JSON.parse(localStorage.getItem("token"))) {
        const res = await saveArticle(JSON.parse(localStorage.getItem("id")), {
          article_id: this.$route.params.id,
        });

        console.log(res);
        this.$toast.success(res.data.msg);
        if (res.data.msg == "收藏成功") {
          this.sc = "sc";
        } else {
          this.sc = "";
        }
      } else {
        this.$toast.fail("操作失败，用户未登录");
      }
    },

    async isSC() {
      const res = await isSave(JSON.parse(localStorage.getItem("id")), {
        article_id: this.$route.params.id,
      });
      console.log(res);
      if (res.data.success == true) {
        this.sc = "sc";
      } else {
        this.sc = "";
      }
    },
    cache() {},
    share() {},
    //
  },
};
</script>

<style  lang="less" scoped>
.article {
  background-color: white;
}
.video {
  display: flex;
  justify-content: center;
  video {
    width: 100%;
  }
}
.detail_text {
  background: white;
  padding: 2.778vw;
  div:nth-child(1) {
    font-size: 4.722vw;
    span:nth-child(1) {
      display: inline-block;
      background: #f7f7f7;
      padding: 1.111vw 1.667vw;
      color: #fe9dc4;
      border-radius: 6.389vw;
    }
  }

  div:nth-child(2) {
    padding: 0px 1.667vw;
    font-size: 3.333vw;
    color: #999999;
    span:nth-child(1) {
      color: black;
    }

    span {
      display: inline-block;
      margin: 0px 5.556vw 0px 0px;
    }
  }

  div:nth-child(3) {
    padding: 0px 1.667vw;
    font-size: 4.444vw;
    display: flex;
    color: #999999;
    > span {
      display: flex;
      align-items: center;
      margin-right: 5.556vw;
    }
    > span.sc {
      color: #fe9dc4;
      background: #f7f7f7;
      padding: 1.111vw 2.778vw;
      color: #fe9dc4;
      border-radius: 6.389vw;
    }
  }
}

.detail_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .detail_item {
    width: 48%;
  }
}
</style>